<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./jsbox.css">
    <script src="https://fastly.jsdelivr.net/npm/cnchar/cnchar.min.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/cnchar-poly/cnchar.poly.min.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/cnchar-trad/cnchar.trad.min.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/cnchar-words/cnchar.words.min.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/cnchar-input/cnchar.input.min.js"></script>
</head>
<body>
    <div>
        <input id='_input' oninput="onSpell()" class='jx-input' placeholder='请使用英文输入法输入' />
        <div class='jx-block' id='_result'></div>
        <div class='jx-block'>
            <input id='_radio1' type='radio' checked='true' name='type'/>
            <label for='_radio1'>拼音输入法</label>
            <input id='_radio2' type='radio' name='type'>
            <label for='_radio2'>五笔输入法86版</label>
            <input id='_radio3' type='radio' name='type'>
            <label for='_radio3'>五笔输入法98版</label>
        </div>
    </div>
    <script>
        function onSpell () {
            var input = _input.value;
            var options = {
                // debounce: 500,
                // onResult: onResult
            };
            if (_radio1.checked) {
                options.type = 'spell';
            } else {
                options.type = 'wubi';
                options.wubiVersion = _radio2.checked ? '86' : '98';
            }
            
            var result = cnchar.input(input, options);
            onResult(result);
        }

        function onResult(result){
            console.log(result, result[0]);
        }
    </script>
</body>
</html>